{% extends "template.html" %}

{% block js %}
<script type="text/javascript">
    $(document).ready(function() {
        $("form#addPlot").validate();
    });
</script>
{% endblock js %}

{% block left %}
<strong>Add New Plot</strong><br/>
<form id="addPlot" action="{% url AddPlot %}" enctype="multipart/form-data" method="post" >
        <div><label>Plot Name:</label></div>
        <div><input type="text" name="plotName"  class="required"/></div><br/>
        <div><label>Location</label></div>
        <div><input type="text" name="location" class="required"/></div><br/>
        <div><label>County</label></div>
        <div><input type="text" name="county" class="required"/></div><br/>
        <div><input type="submit" value="Save" /></div>
</form>
{% endblock left %}
{% block right %}
<Strong>Your Current Plots</Strong>
<table border="1">
    <tr>
        <th>Plot Name</th>
        <th>Location</th>
        <th>County</th>
        <th></th>
        <th>House Occupancy</th>
        <th>Plot policy</th>

    </tr>
    {% for plot in plots %}
    <tr>
        <td>{{plot.plotName}}</td>
        <td>{{plot.location}}</td>
        <td>{{plot.county}}</td>
        <td><a href="{% url AddHouse %}?plotKey={{plot.key}}">Record New Houses</a></td>
        <td><a href="{% url OccupancyStatus %}?plotKey={{plot.key}}">Vacant ({{plot.vacantCount}}) &amp; Occupied ({{plot.occupiedCount}})
         <td><a href="{% url AddPolicy %}?plotKey={{plot.key}}">Click here</a></td>
    {% endfor %}
</table>

{% endblock right %}